<template>
  <!--  通过ref获取html元素 宽高必须设置 -->
  <el-row>
    <el-col>
      <div ref="info" class="circle-chart"></div>
    </el-col>
  </el-row>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { useMapDataStore } from '@/stores/statistics/mapData.js'
import { useGridStore } from '@/stores/grid/grid.js'
import { useAqiFeedbackStore } from '@/stores/aqi/aqiFeedback.js'

const gridStore = useGridStore()
const aqiFeedbackStore = useAqiFeedbackStore()
const mapDataStore = useMapDataStore()
const { proxy } = getCurrentInstance() //获取Vue3全局配置
const info = ref() //用来获取对应标签组件

onMounted(async () => {
  if (mapDataStore.mapData === null || mapDataStore.mapData.length === 0) {
    if (gridStore.grids.length === 0) {
      await gridStore.loadData()
    }
    const names = gridStore.grids.map((item) => item.gname)
    mapDataStore.mapData = await aqiFeedbackStore.getData(names)
  }

  const infoEl = info.value //获取ref="info"的标签组件
  const userEc = proxy.$echarts.init(infoEl, 'light') //proxy.$echarts是在获取全局配置中的echarts，这样就不需要在每个vue中import echarts了

  //此处为图表配置区，可参考Echarts官网替换各种图表
  const option = {
    title: {
      text: '前十省份比重',
      left: '28%',
      textStyle: {
        color: '#fff',
        fontSize: 17,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '占比',
        type: 'pie',
        radius: '60%',
        data: mapDataStore.topTenPercent,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  userEc.setOption(option) //将图标挂载到标签组件
})
</script>

<style lang="scss" scoped>
.circle-chart {
  width: 250px;
  height: 250px;
  padding-top: 20px;
  padding-left: 30px;
}
</style>
